<template>
  <div>
    <el-row>
      <span>供应商：</span>
      <a v-if="showBtn('关联供应商')" @click="handleShowDialog">{{ supplyName || "选择供应商" }}</a>
    </el-row>
    <basic-dialog
      :visible="dialogVisible"
      :handleClose="handleCloseDialog"
      :title="'选择供应商'"
      :show-footer="false"
      :width="'60%'"
    >
      <div class="form-container">
        <el-form ref="queryData" :inline="true" :model="queryData" @submit.native.prevent>
          <el-form-item label="供应商:" prop="supplyName">
            <el-input
              v-model="queryData.supplyName"
              placeholder="请输入供应商名称或供应商代码"
              @keyup.enter.native="handleQueryData(1)"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-if="showBtn('关联-查询') || showBtn('关联供应商')" type="primary" @click="handleQueryData(1)"
              >查询</el-button
            >
            <el-button @click="handleResetData('queryData')">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
      <basic-table
        :loading="tableLoading"
        :columns="tableColumns"
        :dataSource="tableData"
        :pagination="pagination"
        :pageSizes="pageSizes"
        :tableHeight="450"
        :showSelectCol="false"
        :showActionCol="true"
        :actionRender="actionRender"
        @rowDblclick="handleSelectSupplier"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      />
    </basic-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import BasicDialog from '@/components/BasicDialog';
import BasicTable from '@/components/BasicTable';
import { ApiRequest } from '@api/basePage';
import { isResponseSuccess } from '@/utils/bizUtils';
import { getBtnsId } from '@/libs/btnsPermission';

export default {
  name: 'SelectSupplierDialog',
  components: {
    BasicDialog,
    BasicTable,
  },
  props: {
    list: {
      type: Array,
      default: function () {}
    },
    supplyEditName: {
      type: String
    },
    isAuth: {
      type: String
    },
    beforeSelect: { // 选择供应商前触发，默认无此方法
      type: Function
    }
  },
  data () {
    return {
      dialogVisible: false,
      tableLoading: false,
      selectSpuLoading: false,
      pageSizes: [10, 20, 30, 40],
      pagination: {
        nowPage: 1,
        totalNum: 0,
        pageShow: 10
      },
      supplyName: '',
      queryData: {
        supplyName: '' // 商品名称
      },
      tableData: [],
      tableColumns: [
        {
          title: '供应商编号',
          key: 'supplierCode',
          width: 90
        },
        {
          title: '供应商名称',
          key: 'supplierName',
          width: 240
        },
        {
          title: '主联系人',
          key: 'mainLinkman',
          width: 90
        },
        {
          title: '联系电话',
          key: 'mobile',
        },
        {
          title: '生产地址',
          key: 'productionAddress',
          width: 200
        },
        {
          title: '发票类型',
          key: 'invoiceTypeName',
          width: 120
        },
        {
          title: '税率',
          key: 'taxRate',
          width: 80
        },
      ]
    };
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  },
  watch: {
    list (newVal) {
      if (newVal.length > 0 && this.list) {
        this.tableData = this.list;
        this.pagination.totalNum = this.list.length;
      }
    },
    supplyEditName: {
      handler (newVal) {
        this.supplyName = newVal;
      },
      immediate: true
    }
  },
  methods: {
    // 操作列
    actionRender (h, { row }) {
      return (
        <div class="table-action">
          <el-button
            size="mini"
            type="text"
            loading={this.selectSpuLoading}
            onClick={() => this.handleSelectSupplier(row)}
          > 选择
          </el-button>
        </div>
      );
    },
    // 显示弹框
    handleShowDialog () {
      this.dialogVisible = true;
      this.handleQueryData()
    },
    // 选择供应商
    handleSelectSupplier (row) {
      const onSuccess = () => {
        this.supplyName = row.supplierName;
        this.$emit('getName', row);
        this.handleCloseDialog();
      }
      this.beforeSelect ? this.beforeSelect(onSuccess, row) : onSuccess()
    },
    // 获取 表格数据
    handleQueryData (pageNum) {
      if (this.list && this.list.length > 0) {
        return;
      }
      if (pageNum) {
        this.pagination.nowPage = pageNum;
      }
      const apiUrl = '/sysback/supplyinfofromsrcm/getSupplyPageFromScrm';
      if (this.isAuth) {
        this.queryData.isAuth = this.isAuth;
      }
      this.tableLoading = true;
      let curBtnId = getBtnsId('关联供应商');
      sessionStorage.setItem('buttonId', curBtnId);
      ApiRequest(apiUrl, 'post', { ...this.queryData, ...this.pagination }, true).then(res => {
        this.tableLoading = false;
        if (isResponseSuccess(res)) {
          if (res.retData) {
            const { results, totalNum } = res.retData;
            this.tableData = results;
            this.pagination.totalNum = totalNum;
          } else {
            this.tableData = [];
            this.pagination.totalNum = 0;
          }
        }
      }).catch(() => {
        this.tableLoading = false;
      });
    },
    // 分页状态变更
    handlePageChange (pageNum) {
      this.pagination.nowPage = pageNum;
      this.handleQueryData();
    },
    // 分页状态变更
    handlePageSizeChange (pageSize) {
      this.pagination.pageShow = pageSize;
      this.handleQueryData(1);
    },
    // 重置查询条件
    handleResetData (formName) {
      this.$refs[formName].resetFields();
    },
    // 关闭弹框
    handleCloseDialog () {
      this.dialogVisible = false;
    }
  }
};
</script>
<style scoped>
.form-container {
  margin-bottom: 10px;
}
</style>
